<template>
	<div class="count_board">
		<ion-content12>
			<div class="title">优选多种数字资产交易类型
				<div class="pointer_group">
					<img class="group" src="../../../../static/imgs/Group4.png">
				</div>
			</div>
			<div class="center">
				<item class="item" v-for="d in items" track-by="$index" :value="d"></item>
				<span class="unit">{{unit}}</span>
				<slot></slot>
			</div>
		</ion-content12>
	</div>
</template>

<script>
	import item from './count_board_item';
	import store from '../../../vuex/store'
	export default {
		name: 'count_board',
		data() {
			return {
				value: 0,
				unit: 0,
			}
		},
		computed: {
			items() {
				const val = parseInt(this.value, 10);
				return val > -1 ? String(val).split('') : [];
			},
			socket() {
				return this.$store.getters.count_board;
			},
		},
		components: {
			item,
		}, //这里注册
		methods: {},
		mounted() {
			var that = this;
			setTimeout(function() {
				store.dispatch('sned', [{
					channel: 'spot_latest_volume_price'
				}])
			}, 500)
		},
		watch: {
			// 如果 question 发生改变，这个函数就会运行
			socket: function(res) {
				this.value = res;
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.count_board {
		position: relative;
		top: 40px;
		.title {
			margin: 0 auto;
			width: 240px;
			color: #1B1E23;
			font-size: 18px;
			height: 100px;
			line-height: 100px;
		}
		.center {
			display: inline-block;
		}
		.item {
			float: left;
			margin: 0px 10px;
		}
		.unit {
			border-radius: 50%;
			color: #fff;
			height: 31px;
			line-height: 31px;
			position: absolute;
			top: -10px;
			text-align: center;
			right: -42px;
			width: 31px;
		}
		.pointer_group {
			display: inline-block;
			.group {
				height: 14px;
				margin-left: 10px;
				margin-top: -2px;
			}
		}
	}
</style>